<template>
	<view class='gy'>
		<!-- 自定义导航 -->
		<custom-nav @getLocationActive='getLocationActive($event)'></custom-nav>
		<view class='gy-list'>
			<!-- 轮播 -->
			<custom-banner></custom-banner>
			<!-- 搜索 -->
			<custom-search :placeholder="searchPlaceholder" @customSearch='customSearchList'></custom-search>
			<!-- 分类筛选 -->
			<custom-cate @cateChange='customChangeCate' :cateList="cateList"></custom-cate>
			<!-- 信息列表 -->

			<view class="news">

				<blcok v-if='list.length >=1'>
					<view class="news-item" v-for="(item,index) in list" :key='index'>
						<view class="item-header">
							<image :src="item.logo" mode="" class='h-image'></image>
							<view class="header-title">
								<view class="title-top">
									<view>
										{{item.company_title}}
									</view>
									<view class='top-time'>
										{{item.created_at}}
									</view>
								</view>
								<view class="title-down">
									<view style="font-size: 24upx;">
										{{item.realname}} {{item.buty}}
									</view>
									<view class="pro" style="">
										{{item.production_type_txt}}
									</view>
								</view>
							</view>
						</view>
						<view class="item-content">
							<view v-if="item.spec">规格: {{item.spec}}</view>
							<view v-if='item.num > 0'>数量: {{item.num}}</view>
							<view v-if="item.price > 0 ">价格: {{item.price}}</view>
							<view>{{item.desc}}</view>
						</view>
						<view class="item-footer">
							<image src="/static/icon/member/set/s7.png" mode=""></image>
							<view class="f-address">{{item.company_address}}</view>
						</view>
					</view>
				</blcok>

				<blcok v-else>
					<view class="empty">
						<image src="/static/icon/nodata.png" mode=""></image>
					</view>
				</blcok>
			</view>
			<!--发布按钮  -->
			<custom-fabu></custom-fabu>
		</view>
	</view>
</template>

<script>
	import customNav from '@/components/custom-nav/custom-nav.vue';
	import customBanner from '@/components/custom-banner/custom-banner.vue';
	import customSearch from '@/components/custom-search/custom-search.vue';
	import customCate from '@/components/custom-cate/custom-cate.vue';
	import customFabu from '@/components/custom-fabu/custom-fabu.vue'
	export default {
		data() {
			return {
				autoplay: true, //自动滚动
				interval: 3000, //切换时间间隔
				indicatorDots: true,
				searchPlaceholder: '请输入名称、主营产品搜索',
				cateList: [],
				list: [], //查询数据,
				keywords: '', //关键字搜索
				cate_id: '', //分类id
				locationIndex: '',
				page: 1, //页码
				pagesize: 4, //每页显示数量
			}
		},
		components: {
			customNav,
			customBanner,
			customSearch,
			customCate,
			customFabu
		},
		methods: {
			//接受子组件传入的选择位置选择
			getLocationActive(index) {
				console.log('我是父级获取到子级进入页面等到的默认index值', index);
				this.locationIndex = index;
			},
			//接受搜索组件传入的搜索数据
			customSearchList(keywords) {
				console.log('我是父级获取到子级进入页面等到的默认keywords值:', keywords);
				this.keywords = keywords;
			},
			//接受分类组件传入的分类id
			customChangeCate(cate_id) {
				this.cate_id = cate_id;
				console.log('我是父级获取到子级进入页面等到的默认type_id值ss:', cate_id);
				this.list = [];
				this.getMessagesList();
			},
			//获取分类列表
			getCateList() {
				this.$untils.request({
					url: 'api/cate/getAllCateList',
					data: {
						type: 1
					}
				}).then((res) => {
					if (res.code == -1) {
						this.$untils.toast({
							title: res.msg
						});
						return;
					}
					this.cateList = res.data;
				})
			},
			//获取发布的信息列表
			getMessagesList() {

				let obj = {
					page: this.page,
					pagesize: this.pagesize,
					provide_type: 2,
				}

				if (this.keywords) { //关键字搜索
					obj.keywords = this.keywords;
				}

				if (this.cate_id) { //分类搜索
					obj.cate_id = this.cate_id;
				}

				if (this.locationIndex == 1) { //点击附近

				}


				this.$untils.request({
					url: 'api/message/getMessageList',
					method: 'post',
					data: obj
				}).then(res => {
					if (res.code == -1) {
						this.$untils.toast({
							title: res.msg
						});
						return;
					}
					this.list = this.list.concat(res.data);
				})
			}
		},
		//上拉加载
		onReachBottom() {
			this.page++;
			this.getMessagesList();
		},
		onLoad() {
			this.getCateList();
			this.getMessagesList();
		}
	}
</script>

<style>
	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.gy-list {
		position: relative;
		top: 100upx;
	}

	.news {
		margin-bottom: 100upx;
	}


	.news-item {
		border-top: 10upx solid #EEEEEE
	}

	.item-header {
		display: flex;
		margin-top: 20upx;
	}

	.news-item .h-image {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		margin: 0 20upx;
	}


	.header-title {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.title-top {
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin: 10upx 0;
		font-size: 32upx;
		color: #9CADB5;
	}

	.title-top .top-time {
		font-size: 24upx;
		margin-right: 10upx;
	}

	.title-down {
		margin: 10upx 0;
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		font-size: 24upx;
		color: #B9B9B9;
	}

	.title-down .pro {
		margin-right: 10upx;
		border: 1upx solid #EC847D;
		color: #EC847D;
		border-radius: 20upx;
		padding: 5upx;
	}

	.item-content {
		font-size: 28upx;
		text-align: justify;
		margin: 20upx;
		color: #545454;
		line-height: 50upx;
	}

	.item-footer {
		width: 100%;
		height: 40upx;
		display: flex;
		margin: 20upx;
		color: #B9B9B9;
		font-size: 28upx;
	}

	.item-footer image {
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.empty {
		margin-top: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.empty image {
		width: 200upx;
		height: 200upx;
	}
</style>
